<my-pageheader></my-pageheader>

<div style="margin: 20px 20px 50px 20px">
    <mat-card style="margin-top: 20px; background-color: #f0f0f0">
        <span style="font-weight: bold; font-size: 28px" *ngIf="openMode === 'deploy' && solution">模型部署 —— {{solution.name}}</span>
        <span style="font-weight: bold; font-size: 28px" *ngIf="openMode === 'view' && task">模型部署任务详情 —— {{task.taskName}}</span>
    </mat-card>
    <mat-card>
        <label>&nbsp;&nbsp;&nbsp;部署至：&nbsp;&nbsp;&nbsp;&nbsp;</label>
        <mat-radio-group [(ngModel)]="deployTo" [disabled]="deployStarted">
            <mat-radio-button value="local" color="primary">本地</mat-radio-button>
            &nbsp;&nbsp;
            <mat-radio-button value="cubeai" color="primary">CubeAI能力开放平台</mat-radio-button>
        </mat-radio-group>
    </mat-card>

    <mat-card *ngIf="openMode === 'deploy' && deployTo === 'local'">
        <div>请在本地安装有docker环境的系统中运行如下命令：</div>
        <br>
        <span>
            &nbsp;&nbsp;&nbsp;&nbsp;
            {{genLocalDeployCmd()}}
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        </span>
        <a (click)="copyDockerUrl(genLocalDeployCmd())" matTooltip="复制">
            <span class="fa fa-paste" style="color: #673ab7"></span>
        </a>
    </mat-card>

    <mat-card *ngIf="deployTo === 'cubeai' && (solution || deployStarted)">
        <div *ngIf="openMode === 'deploy'">
            <label>部署模式：&nbsp;&nbsp;&nbsp;&nbsp;</label>
            <mat-radio-group [(ngModel)]="deployMode" disabled>
                <mat-radio-button value="private" color="primary">私有</mat-radio-button>
                &nbsp;&nbsp;
                <mat-radio-button value="public" color="primary">开放</mat-radio-button>
            </mat-radio-group>
        </div>

        <mat-card>
            <div *ngIf="openMode === 'deploy'">
                <button mat-raised-button color="primary" (click)="deploySolution()" [disabled]="deployStarted">
                    开始部署
                </button>
            </div>
            <br>

            <mat-card *ngIf="deployStarted && !statusCreateTaskError">
                <mat-progress-bar mode="determinate" [value]="progressDeploy" color="primary" *ngIf="statusDeploy !== '失败'"></mat-progress-bar>
                <mat-progress-bar mode="determinate" [value]="progressDeploy" color="warn" *ngIf="statusDeploy === '失败'"></mat-progress-bar>
                <mat-form-field style="width: 100%">
                    <textarea matInput style="height: 100px; font-size: small"
                              [(ngModel)]="detailDeploy" [readonly]="true">
                    </textarea>
                </mat-form-field>
            </mat-card>

            <mat-card *ngIf="getCompleteSuccess() || getCompleteFail() || statusCreateTaskError">
                <div class="row justify-content-center">
                    <div *ngIf="getCompleteSuccess()">
                        <span class="alert alert-success" style="font-size: 18px">
                            模型部署成功！
                        </span>
                        <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                        <button (click)="gotoDeployedAbility()">查看模型部署实例</button>
                    </div>
                    <h4 class="alert alert-danger" *ngIf="getCompleteFail()">
                        模型部署失败！
                    </h4>
                    <p class="alert alert-danger" *ngIf="statusCreateTaskError">
                        等待超时！请查看任务列表中是否有后台任务正在执行。如无可能是系统繁忙，请稍后再试...
                    </p>
                </div>
            </mat-card>
            <br><br>
        </mat-card>
    </mat-card>
</div>
